import { ProList } from "@ant-design/pro-components";
import { Button, Space, Tag } from "antd";

type GithubIssueItem = {
	url: string;
	id: number;
	number: number;
	title: string;
	labels: {
		name: string;
		color: string;
	}[];
	state: string;
	comments: number;
	created_at: string;
	updated_at: string;
	closed_at?: string;
};

const splinetool: React.FC = () => {

	const dataSource: any[] = [
		{
			name: "实验名称1",
			desc: "系统性的沉淀B端知识体系",
			content: [
				{
					label: "模型数",
					value: 2903,
				},
				{
					label: "指标数",
					value: 3720,
				},
				{
					label: "实验状态",
					value: "成功",
					status: "success",
				},
			],
		},
		{
			name: "实验名称2",
			desc: "系统性的沉淀B端知识体系",
			content: [
				{
					label: "模型数",
					value: 2904,
				},
				{
					label: "指标数",
					value: 3721,
				},
				{
					label: "实验状态",
					value: "成功",
					status: "success",
				},
			],
		},
		{
			name: "实验名称3",
			desc: "系统性的沉淀B端知识体系",
			content: [
				{
					label: "模型数",
					value: 2905,
				},
				{
					label: "指标数",
					value: 3722,
				},
				{
					label: "实验状态",
					value: "成功",
					status: "success",
				},
			],
		},
	];
	return (<>
		<ProList<GithubIssueItem>
			toolBarRender={() => {
				return [
					<Button key="3" type="primary">
						新建
					</Button>,
				];
			}}
			search={{}}
			rowKey="name"
			headerTitle="基础列表"
			dataSource={dataSource}
			pagination={{
				pageSize: 5,
			}}
			showActions="hover"
			metas={{
				title: {
					dataIndex: "user",
					title: "用户",
				},
				avatar: {
					dataIndex: "avatar",
					search: false,
				},
				description: {
					dataIndex: "title",
					search: false,
				},
				subTitle: {
					dataIndex: "labels",
					render: (_, row) => {
						return (
							<Space size={0}>
								{row.labels?.map((label: { name: string }) => (
									<Tag color="blue" key={label.name}>
										{label.name}
									</Tag>
								))}
							</Space>
						);
					},
					search: false,
				},
				actions: {
					render: (text, row) => [
						<a
							href={row.url}
							target="_blank"
							rel="noopener noreferrer"
							key="link"
						>
							链路
						</a>,
						<a
							href={row.url}
							target="_blank"
							rel="noopener noreferrer"
							key="warning"
						>
							报警
						</a>,
						<a
							href={row.url}
							target="_blank"
							rel="noopener noreferrer"
							key="view"
						>
							查看
						</a>,
					],
					search: false,
				},
				status: {
					// 自己扩展的字段，主要用于筛选，不在列表中显示
					title: "状态",
					valueType: "select",
					valueEnum: {
						all: { text: "全部", status: "Default" },
						open: {
							text: "未解决",
							status: "Error",
						},
						closed: {
							text: "已解决",
							status: "Success",
						},
						processing: {
							text: "解决中",
							status: "Processing",
						},
					},
				},
			}}
		/>
	</>);
};

export default splinetool;